<template>
	 <uni-nav-bar title="团惠包详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	 <!-- 团名称及创建人/分享人信息 -->
	 <view class="package direction-start information">
		 <view @click="openEstablish()">
			 <text>{{orderAll.title}}</text>
			 <image :src="lookTeam" mode=""></image>
		 </view>
		 <view>{{orderAll.des}}</view>
		 <image :src="Expired" mode="" v-if="orderAll.status==2" class="overdueImg"></image>
	 </view>
	 <view class="center data" style="color:#666;margin-left: 20rpx;" v-if="orderAll.status!=2">
		 <view>距结束还剩：</view>
		 <uni-section type="line" padding >
			<uni-countdown :second="orderAll.cha_time" :show-colon="false"  color="#666" :font-size="16" @timeup="timeup"/>
		 </uni-section>
	 </view>
	 <view class="package" style="padding:20rpx 0px">
		 <view v-for="(item,index) in orderAll.goods_list" :key='item.id'>
			<!-- 店铺名称 -->
			<view class="space-between shopTop">
				<view class="packageLsit" @click="navTo('shopp/Shopkeeper?id='+item.store_id)">
					<image src="../../static/groupBenefits/shop.png" mode=""></image>
					<text>{{item.store_name}}</text>
					<uni-icons type="forward" size="19" color="#666"></uni-icons>
				</view>
			</view>
			<!-- 商品信息 -->
			<ShopList :type="'subsidy'" :shoppAll="item" :show="true" :state="'team'"></ShopList> 
		 </view>
		 <view class="center price" style="padding: 0px 20rpx;box-sizing: border-box;">
			 <view style="margin-right: 15rpx;">总价</view>
			 <view><text>¥</text><text>{{orderAll.total_money}}</text></view>
		 </view>
	 </view>
	     <view class="package">
	 		 <view class="title">车友团等级越高补贴越多</view>
			 <!-- 团等级价 -->
	 		 <TeamPrice :state="'0'" :priceList="orderAll.price_list" :addNums="'0'"></TeamPrice>
			 <view class="firstGroup">
				<text>按照</text>
				<text>{{orderAll.team_name}}</text>
				<text>享受平台补贴团惠价</text>
				<image :src="Prompt1" mode="" @click="openRiders()"></image>
			 </view>
	    </view>
		<!-- 奖励说明 -->
		<Reward 
		:fx_price="orderAll.fx_price"
		 :fxPriceCount="orderAll.fx_price_count"
		  :orderID="orderAll.bao_id" 
		  :title="orderAll.title"
		  ></Reward>
		<!-- 分享团 -->
		<MyGroup :bordID="orderAll.bao_id"></MyGroup> 
	  <ShopBot 
		:share="''" 
		:state="'details'"
		:bao_id="orderAll.bao_id"
		:teamID="orderAll.team_id"
		:fxID="orderAll.fx_user_id"
	    :money="orderAll.money"
		:totalMoney="orderAll.total_money"
		:yhPrice="orderAll.yh_price"
		:addNums='0'
		:empty="true"
		:text="'实付'"
	    >
	   </ShopBot>
	  <!-- 创建团信息弹框 -->
	  <uni-popup ref="establishPopup" type="center">
	   <Establish 
	   :name="orderAll.title"
	   :Share="orderAll.fx_nickname"
	   :establish="orderAll.create_nickname"
	   :explain="orderAll.des"
	   ></Establish>
	  </uni-popup>
	  <!-- 车友团信息弹框 -->
	  <uni-popup ref="ridersPopup" type="center">
	  <Riders :image="orderAll.team_image" :name="orderAll.team_name"></Riders>
	  </uni-popup>
</template>

<script setup lang="ts">
	import { navBack,navTo} from '@/utils/navigator';
	import TeamPrice from '@c/groupBenefits/teamPrice.vue';
	import ShopBot from '@c/groupBenefits/DetailBot.vue';
	import ShopList from '@c/groupBenefits/shopGrid.vue';
	import Reward from '@c/groupBenefits/reward.vue';
	import Riders from '@c/groupBenefits/riders.vue';
	import MyGroup from '@c/groupBenefits/myGroup.vue';
	import Establish from '@c/groupBenefits/establishPop.vue';
	import { Expired,Prompt1 } from '@/utils/Static';
	import { onLoad,onShow } from '@dcloudio/uni-app';
	import { toPublish } from '@mqtt';
	import { ref} from 'vue';
	import {myGroupTeamDetail} from '@/gql/group';
	import { getDriverID } from '@/stores/driverID';
	const user_id = getDriverID();
	const orderAll=ref({})
	const orderID=ref('')//团惠包详情ID
	const teamID=ref('')//团ID
	const fxID=ref('')//分享人ID
	const type=ref('')//是否有被购买
	
	const empty=ref(false)
	
	const establishPopup = ref(null);
	const ridersPopup=ref(null)
	onLoad((pearm)=>{
		orderID.value=pearm.id
		teamID.value=pearm.team
		fxID.value=pearm.fxID
		type.value=pearm.type
	})
	onShow(()=>{
		init()
	})
	/**
	 * 获取团惠包初始详情页面
	 */
	function init(){
		if(type.value){
			var payload = {
			  query: myGroupTeamDetail,
			  variables: {
				user_id,
				bao_id: Number(orderID.value),
				type:type.value
			  },
			};
		}else{
			var payload = {
			  query: myGroupTeamDetail,
			  variables: {
				user_id,
				id: Number(orderID.value),
			  },
			};
		}
		toPublish(
		  'ql/store/getBaoInfo2',
		  payload,
		  (obj: any) => {
		    const { get_bao_info } = obj.data;
			orderAll.value=get_bao_info
			if(get_bao_info.team_id&&get_bao_info.status!=2){ 
				empty.value=true
			}
		  }
		);
	}
	/**
	 * 倒计时时间到时触发
	 */
	function timeup(){
		if(orderID.value){
			init()
		}
	}
	/**
	 * 团惠包信息弹框
	 */
	function openEstablish() {
	  establishPopup.value.open();
	}
	/**
	 * 车友团信息弹框
	 */
	function openRiders() {
	  ridersPopup.value.open();
	}
</script>

<style scoped lang="less">
	@import url('../groupBenefits/less/groupEditor.less');
</style>
<style>
	.data>>>.uni-countdown__splitor{
		color:#666 !important;
	}
</style>